<template>
	<view class="order-list-container">
		<view class="order-list-header">
			<view class="header-navi">
				<!-- #ifdef MP-WEIXIN -->
				<!-- 微信小程序中不显示按钮 -->
				<!-- #endif -->

				<!-- #ifndef MP-WEIXIN -->
				<!-- 非微信小程序平台（包括iOS和Android）显示按钮 -->
				<view class="back-icon">
					<uni-icons class="left-icon" type="left" size="25" @click="backPerson()"></uni-icons>
				</view>
				<!-- #endif -->

				<view class="title">
					{{title}}
				</view>
			</view>

			<view class="search-order">
				<uni-search-bar @input="input" @confirm="search" :focus="true" v-model="searchValue" bgColor="#f2f2f2"
					placeholder="快速搜索订单" readonly></uni-search-bar>
			</view>
			<view class="status-list-box">
				<view class="status-list">
					<view class="status-item" v-for="(item, index) in statusList" :key="index"
						:class="{'selected': selectStatusIndex===index}" @click="selectStatus(index)">
						{{item.name}}
					</view>
				</view>

			</view>
		</view>
		<view class="order-list-content">
			<view class="order-list">
				<view class="order-item" v-for="(item, index) in orderList" :key="index"
					v-show="selectOrderStatus==item.setOrderStatus || selectOrderStatus==statusList[0].statusCode" @click="toOderDetail(item.orderId)">
					<view class="order-header">
						<view class="order-num">
							<view class="oder-text">
								{{orderCode}}：
							</view>
							<view class="numbers">
								{{item.orderNumber}}
							</view>
						</view>
						<view class="order-status" v-for="(el, index) in statusList" :key="index" :class="{'cancel': el.statusCode=== 0}" 
						v-show="el.statusCode===item.setOrderStatus">
							{{el.name}}
						</view>
					</view>
					<view class="order-content">
						<view class="content-left">
							<view class="show-img">
								<img class="img-item" :src="item.allData.orderData.showImg" alt="" />
							</view>
						</view>
						<view class="content-right">
							<view class="content-right-top">
								<view class="show-name">
									{{item.allData.orderData.showName}}
								</view>
							</view>
							<view class="content-right-center">
								<view class="address">
									{{item.allData.orderData.venues}}
								</view>
							</view>
							<view class="content-right-bottom">
								<view class="price-votes">
									<view class="price">
										{{item.allData.orderData.perTicketPrice}}
									</view>
									<view class="unit">
										{{unit}}
									</view>
									<view class="votes">
										/ {{item.allData.orderData.limitNum}}{{piece}}
									</view>
								</view>
								<view class="shipping" :class="{'orange': item.allData.orderData.getDistributionType === deliveryMethodOne,
								'yellow':item.allData.orderData.getDistributionType === deliveryMethodTwo,
								'grey': item.setOrderStatus===0}">
									{{item.allData.orderData.getDistributionType}}
								</view>
							</view>
						</view>
					</view>
					<view class="order-footer">
						<view class="btn-content">
							<view class="btn-item" v-for="(el,index) in item.btnList.list" :key="index" 
							:class="{'btn-light': el.btnName === btnTypeOfCancelOrder 
							|| el.btnName === btnTypeOfSeeLogistics 
							|| el.btnName === btnTypeOfDelOrder,
							'btn-orange': el.btnName === btnTypeOfGoPay 
							|| el.btnName === btnTypeOfConfirmReceive 
							|| el.btnName === btnTypeOfQRCode 
							|| el.btnName === btnTypeOfCommnent}"
							v-show="el.btnName!='取消订单'">
					        {{el.btnName}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		onMounted,
		onUnmounted,
		watch,
		watchEffect
	} from 'vue';

	import {
		ORDER_DICTIONARY
	} from '@/common/orderDict.js';
import {
		sharedState,
		updateState
	} from '@/common/store.js'
	import { onShow, onHide, onUnload, onLoad } from '@dcloudio/uni-app';
	
	
	const {
		title,
		unit,
		piece,
		orderCode,
		cancel,
		deliveryMethodOne,
		deliveryMethodTwo,
		btnTypeOfCancelOrder,
		btnTypeOfGoPay,
		btnTypeOfSeeLogistics,
		btnTypeOfConfirmReceive,
		btnTypeOfQRCode,
		btnTypeOfDelOrder,
		btnTypeOfCommnent,
		statusList
	} = ORDER_DICTIONARY;



	let selectStatusIndex = ref(0);
	// let selectStatusName = ref('全部');
let selectOrderStatus = ref(5);
	
	
//导航状态类型选择
	let selectStatus = (index) => {
		console.log(statusList);
		selectStatusIndex.value = index;
		selectOrderStatus.value = statusList[index].statusCode;
		console.log(statusList[index].name);
		console.log("selectOrderStatus:", selectOrderStatus.value);
	}
	
	const orderList =ref([]);
	const remainingTime = ref('15:00'); 
	
	const toOderDetail = (id)=> {
		const orderId = id;
		updateState(orderId);
orderList.value[0].time = remainingTime.value;
	
		uni.setStorage({
			key: 'toOrderList',
			data: orderList.value,
			success: function() {
				console.log('数据存储成功');
				uni.navigateTo({
					url:"/pages/orderdetail/orderdetail?id="+orderId
				})
			},
			fail: function(err) {
				console.error('数据存储失败', err);
			}
		});
		uni.setStorage({
			
		})
	
	}
	let backPerson = () => {
		uni.switchTab({
			url:"/pages/person/person"
		})
	}
	
	onShow(()=>{
		uni.getStorage({
			key: 'toOrderList',
			success: function(res) {
				console.log('获取支付跳转订单详情数据:', res.data);
				orderList.value = res.data;
				console.log("orderList：",orderList.value);
				const [minutes, seconds] = res.data[0].time.split(':').map(Number);
				const totalSeconds = minutes * 60 + seconds;
						
				remainingTime.value = res.data.time;
				// 设置倒计时
				startCountDown(totalSeconds);
			},
			fail: function(err) {
				console.error('获取数据失败', err);
			}
		});
	})
	
	onUnmounted(() => {
		if (timer.value) {
			clearInterval(timer.value);
		}
	});
	
	const timer = ref(null);
	
	const formatTime = (totalSeconds) => {
		const minutes = Math.floor(totalSeconds / 60);
		const seconds = totalSeconds % 60;
		return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
	};
	
	const startCountDown = (totalSeconds) => {
		if (timer.value) {
			clearInterval(timer.value);
		}
	
		timer.value = setInterval(() => {
			if (totalSeconds > 0) {
				totalSeconds -= 1;
				remainingTime.value = formatTime(totalSeconds);
			} else {
				clearInterval(timer.value);
				// 倒计时结束，可以在这里处理相关逻辑
			}
		}, 1000);
	};
</script>

<style lang="scss" scoped>
	.order-list-container {
		width: 100%;
		min-height: 100vh;
		height: auto;
		display: block;
		background: #f8f8fe;

		.order-list-header {
			height: 100px;
			top: 0px;
			width: 100%;
			height: 130px;
			position: fixed;
			z-index: 1000;
			background: #fff;
			box-shadow: 0px 0px 2px 0px #ddd;

			.header-navi {
				width: 100%;
				height: 40px;
				display: flex;
				background: #fff;
				box-sizing: border-box;
				// text-align: center;
				// justify-content: center;
				// align-items: center;


				.title {
					width: 100%;
					position: absolute;
					line-height: 50px;
					font-size: 18px;
					z-index: 5;
					height: 40px;
					text-align: center;
				}

				.back-icon {
					z-index: 10;
					position: absolute;
					left: 10px;

					.left-icon {
						line-height: 50px !important;
					}
				}
			}

			.search-order {
				box-sizing: border-box;
				padding: 0px 15px;
				height: 50px;
			}

			.status-list-box {
				box-sizing: border-box;
				padding: 0px 25px;
				background: #fff;

				.status-list {
					width: 100%;
					overflow-x: auto;
					white-space: nowrap;
					padding: 0;
					margin: 0;
					height: 50px;
					box-sizing: border-box;

					.status-item {
						display: inline-block;
						width: auto;
						box-sizing: border-box;
						height: auto;
						margin-right: 26px;
						line-height: 50px;
						font-size: 14px;
						color: #999;
					}

					.status-item:last-child {
						margin-right: 0px;
					}
				}
			}
		}

		.order-list-content {
			margin-top: 140px;
			width: 100%;
			height: auto;
			box-sizing: border-box;
			padding: 0px 25px;

			.order-list {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-wrap: wrap;

				.order-item {
					float: left;
					margin-top: 20px;
					width: 380px;
					height: 250px;
					background: #fff;
					border-radius: 8px;
					box-shadow: 0px 0px 2px 0px #dddddd;
					box-sizing: border-box;
					padding: 0px 20px;

					.order-header {
						width: 100%;
						height: 60px;
						font-size: 12px;


						.order-num {
							color: #999;
							height: 60px;
							line-height: 60px;
							float: left;
							width: auto;

							.oder-text {
								float: left;
							}

							.numbers {
								float: left;
							}
						}

						.order-status {
							height: 60px;
							line-height: 60px;
							float: right;
							width: auto;
						}
					}

					.order-content {
						width: 100%;
						height: 130px;
						box-sizing: border-box;
						padding: 23px 0px;
						border-bottom: 1px solid #ddd;
						border-top: 1px solid #ddd;

						.content-left {
							width: 62px;
							display: block;
							float: left;

							.show-img {
								width: auto;

								.img-item {
									width: 62px;
									height: 80px;
								}
							}
						}

						.content-right {
							box-sizing: border-box;
							padding-left: 10px;
							display: block;
							width: calc(100% - 62px);
							float: left;
							height: 80px;

							.content-right-top {
								width: auto;
								height: 25px;
								line-height: 25px;

								.show-name {
									font-size: 14px;
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
								}
							}

							.content-right-center {
								width: auto;
								height: 25px;
								line-height: 25px;

								.address {
									font-size: 12px;
									color: #999;
									height: 25px;
									line-height: 35px;
								}
							}

							.content-right-bottom {
								width: auto;
								height: 30px;

								.price-votes {
									float: left;

									.price {
										float: left;
										font-size: 16px;
										height: 30px;
										line-height: 40px;
									}

									.unit {
										float: left;
										font-size: 10px;
										height: 30px;
										line-height: 40px;
										margin-left: 2px;
									}

									.votes {
										float: left;
										color: #999;
										font-size: 12px;
										height: 30px;
										line-height: 40px;
									}
								}

								.shipping {
									float: right;
									height: 25px;
									width: auto;
									box-sizing: border-box;
									padding: 0px 10px;
									font-size: 12px;
									line-height: 25px;
									text-align: center;
									border-radius: 20px;
									margin-top: 5px;
								}
							}
						}
					}

					.order-footer {
						width: 100%;
						height: 60px;
						box-sizing: border-box;
						padding-top: 12px;

						.btn-content {
							float: right;
							width: auto;
							height: 30px;

							.btn-item {
								float: left;
								height: 30px;
								font-size: 12px;
								line-height: 30px;
								width: auto;
								border-radius: 3px;
								box-sizing: border-box;
								padding: 0px 15px;
								margin: 0px;
								margin-left: 10px;
							}
						}

					}
				}

				.order-item:last-child {
					margin-bottom: 30px;
				}
			}

		}

	}

	.selected {
		color: #ff2d2de2 !important;
		font-weight: bold;
	}

	.cancel {
		color: #999 !important
	}

	.yellow {
		background: #ffc71c;
		color: #fff;
	}

	.orange {
		background: #ff2d2de2;
		color: #fff;
	}

	.grey {
		background: #ccc;
		color: #fff;
	}

	.btn-light {
		border: 1px solid #ddd;
		color: #333;
	}
	
	.btn-orange {
		border: 1px solid #ff2d2de2;
		color: #ff2d2de2;
	}
</style>